// 获取登录表单元素
const loginForm = document.getElementById('loginForm');
// 获取注册表单元素
const registerForm = document.getElementById('registerForm');
// 获取登出按钮元素
const logoutButton = document.getElementById('logoutButton');
// 获取显示消息的元素
const messageDiv = document.getElementById('message');

// 为登录按钮添加点击事件监听器
loginForm.addEventListener('submit', function (e) {
    e.preventDefault();

    const name = document.getElementById('loginName').value;
    const password = document.getElementById('loginPassword').value;

    // 简单验证，这里仅示例非空验证，实际需要更完善规则
    if (name.trim() === '' || password.trim() === '') {
        alert('用户名和密码不能为空');
        return;
    }

    // 使用fetch发送POST请求到后端登录接口
    fetch('http://localhost:3000/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name, password })
    })
        .then(response => {
            if (!response.ok) {
                console.log('登录请求响应状态码:', response.status);
                if (response.status === 401) {
                    return response.json().then(data => {
                        console.error('登录失败原因:', data.error);
                        throw new Error(data.error);
                    });
                }
                throw new Error('网络请求错误，请稍后重试');
            }
            return response.json();
        })
        .then(data => {
            if (data.message === '登录成功') {
                // 登录成功，显示登出按钮，隐藏登录注册表单等，可按需调整页面显示逻辑
                logoutButton.style.display = 'block';
                loginForm.style.display = 'none';
                registerForm.style.display = 'none';
                messageDiv.textContent = '登录成功';
            } else {
                messageDiv.textContent = data.error;
            }
        })
        .catch(error => {
            console.error('登录请求出错：', error);
            messageDiv.textContent = error.message;
        });
});

// 为注册按钮添加点击事件监听器
registerForm.addEventListener('submit', function (e) {
    e.preventDefault();

    const name = document.getElementById('registerName').value;
    const password = document.getElementById('registerPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    if (name.trim() === '' || password.trim() === '' || confirmPassword.trim() === '') {
        alert('用户名、密码和确认密码不能为空');
        return;
    }

    if (password!== confirmPassword) {
        alert('两次输入的密码不一致');
        return;
    }

    // 使用fetch发送POST请求到后端注册接口
    fetch('http://localhost:3000/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name, age: 0, password })
    })
        .then(response => response.text())
        .then(data => {
            if (data === '添加成功') {
                messageDiv.textContent = '注册成功，请登录';
            } else {
                messageDiv.textContent = '注册失败，请稍后重试';
            }
        })
        .catch(error => {
            console.error('注册请求出错：', error);
            messageDiv.textContent = '注册请求出错，请稍后重试';
        });
});

// 为登出按钮添加点击事件监听器
logoutButton.addEventListener('click', function () {
    // 使用fetch发送POST请求到后端登出接口
    fetch('http://localhost:3000/logout', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => {
            if (data.message === '登出成功') {
                // 登出成功，隐藏登出按钮，显示登录注册表单等，可按需调整页面显示逻辑
                logoutButton.style.display = 'none';
                loginForm.style.display = 'block';
                registerForm.style.display = 'block';
                messageDiv.textContent = '已登出';
            }
        })
        .catch(error => {
            console.error('登出请求出错：', error);
            messageDiv.textContent = '登出请求出错，请稍后重试';
        });
});